require('./PageAddevaluate.styl');
import { Dialog } from 'saltui';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Boxs, NavBar, Group, TextareaField } from 'saltui';
import Icon from 'salt-icon'
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const classNames = require('classnames')
const Sliderselectinfo = require('components/sliderselectinfo')
const Tabselect = require('components/tabselect')
const Getuserlist = require('components/getuserlist');
const content = ["优秀", "良好", "合格", "待努力"]
const Uploadimg = require('components/uploadimg')
class Addevaluate extends React.Component {

    constructor(props) {
        super(props);
        var msg = ''
        if (props.params.origin == 'add') {
            var title = '添加评价';
            var urlList = [];
        } else if (props.params.origin == 'edit') {
            var title = '评价编辑';
            var {
                urlList,//图片url
                selEvaluateRank,//选中的评价类别
                evaluateTitle,//评价内容类别
                evaluateStudentList,//评价学生
                evaluateRankList,//评价类别选项
                evaluateId,//评价详情id
                createDate,//评价日期
                msg//评价备注
            } = Control.state.data;
            this.selectTheme = evaluateTitle;
            this.evaluateRankList = evaluateRankList;
            let textArr = [];
            var tabContent = [];
            for (let item of evaluateStudentList) {
                textArr.push(item.name);
            }
            for (let [key, item] of evaluateRankList.entries()) {
                if (selEvaluateRank.includes(item.msg)) {
                    this.selectnum = key;
                }
                tabContent.push(item.msg);
            }
            var text = textArr.join(" ");
            var theme = evaluateTitle.name;
        }
        this.state = {
            urlList: urlList,//图片url列表
            classId: '',//选中的班级
            evaluateList: [],//评价主题列表
            classList: [],//老师教课班级列表
            studentList: [],//班级下学生列表
            selectStudentList: evaluateStudentList,//选中的学生列表
            evaluateRankList: evaluateRankList,
            tabContent: tabContent,
            text: '' || text,//被评价学生
            theme: '' || theme,//评价内容主题
            wordcount: msg.length,//备注内容字计算
            activeRead: false,
            content: '' || msg,//备注
            active: false,//用户选择页
            selectType: '',//'valuationstudent',//用户选择页类型
            title: title,
            usertitle: '选择评价学生'
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.handleClickDel = this.handleClickDel.bind(this);
        this.handleClickSelect = this.handleClickSelect.bind(this);
        this.handleGetUsers = this.handleGetUsers.bind(this);
        this.refresh = this.refresh.bind(this);
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    //右侧导航按钮
    handleOnRightClick() {
        let { selectStudentList, content: remark } = this.state;
        if(this.selectTheme){
            var { id: evaluateTitleId, name: evaluateTitle } = this.selectTheme;
        }
        let formData = this.refs.uploadimg.formData;
        if (this.props.params.origin == 'add') {
            var evaluateId = '';
            var evaluateRankId = this.state.evaluateRankList[this.refs.tabselect.state.active];
        } else if (this.props.params.origin == 'edit') {
            var { evaluateId } = Control.state.data;
            var evaluateRankId = this.evaluateRankList[this.refs.tabselect.state.active];
        }
        if(!selectStudentList){
            Dialog.alert({
                title: '提示',
                content: '请选择评价学生',
                onConfirm() {
                },
              });
            return;
        }else if(!evaluateTitleId){
            Dialog.alert({
                title: '提示',
                content: '请选择评价主题',
                onConfirm() {
                },
              });
            return;
        }else if(!evaluateRankId){
            Dialog.alert({
                title: '提示',
                content: '请选择评价等级',
                onConfirm() {
                },
              });
            return;
        }
        if (selectStudentList && evaluateTitleId && evaluateTitle && evaluateRankId) {
            Actions.submit({ formData,evaluateId, selectStudentList, evaluateTitleId, evaluateTitle, evaluateRankId, remark })
        }
    }
    handleTextChange(name, newValue) {
        if (name == 'content' && (this.state.wordcount.length + newValue.length > 200)) {
            return;
        }
        this.setState({
            [name]: newValue,
        }, () => {
            if (name == 'content') {
                this.setState({ wordcount: this.state.content.length })
            }
        });
    }
    handleFocus() {
        this.setState({ activeRead: true })
    }
    handleBlur() {
        this.setState({ activeRead: false })
    }
    //备注内容删除
    handleClickDel() {
        this.setState({ wordcount: 0, content: '' })
    }
    //选择用户列表
    handleClickSelect(selectType) {
        let cb = () => {
        }
        if (selectType == 'valuationstudent') {
            Actions.getClassList({ selectType }, cb)
        } else if (selectType == 'valuationclass') {
            Actions.getEvaluateTitle({ selectType,selectStudentList:this.state.selectStudentList}, cb)
        }
    }
    //获取用户选择数据
    handleGetUsers(userlist, origin = undefined) {
        if (origin == 'valuationstudent' || !origin) {
            let text = [];
            for (let item of userlist) {
                text.push(item.name);
            }
            this.setState({ active: false, selectStudentList: userlist, text: text.join(" ") })
        } else if (origin == 'valuationclass') {
            this.selectTheme = userlist;
            this.setState({ theme: userlist.name, active: false })
        }
    }
    //下拉列表更新数据
    refresh(classId) {
        if (classId) {
            Actions.getStudentList({ classId });
        }
    }
    render() {
        let t = this;
        return (
            <div className="addevaluate">
                <NavBar
                    className="my-navbar"
                    isShow={false}
                    title={this.state.title}
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={this.handleOnRightClick.bind(this)}
                    rightText='提交'
                />
                <Sliderselectinfo
                    title="评价学生"
                    type="valuationstudent"
                    IconName="user"
                    handleClickListItem={this.handleClickSelect}
                    text={this.state.text}
                    rows={1}
                />
                <Sliderselectinfo
                    title="评价主题"
                    handleClickListItem={this.handleClickSelect}
                    IconName="plus-round"
                    type="valuationclass"
                    text={this.state.theme}
                />
                <Group.List className="t-MT10 addevaluate-comments">
                    <TextareaField
                        layout="h"
                        label=""
                        className={classNames({ "activeRead": this.state.activeRead })}
                        minRows={3}
                        maxRows={5}
                        placeholder="请输入备注(可不填)"
                        value={t.state.content}
                        tip={<div className="word-color">{t.state.activeRead && t.state.content.length > 0 ? <Icon name="toast-error" fill="#fc3d39" onClick={t.handleClickDel} /> : null}<span>{this.state.wordcount}</span>/200字</div>}
                        onChange={t.handleTextChange.bind(t, 'content')}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                    />
                </Group.List>
                <Group.List className="t-MT20" >
                    <Tabselect
                        ref="tabselect"
                        content={this.state.tabContent}
                        selectnum={this.selectnum}
                    />
                </Group.List>
                {(this.state.classList.length > 0 || this.state.evaluateList.length > 0) &&
                    <Getuserlist
                        active={this.state.active}
                        title={this.state.usertitle}
                        rightText={this.state.usertitle == "选择评价学生" ? '确定' : ''}
                        selectType={this.state.selectType}
                        handleGetUsers={this.handleGetUsers}
                        classList={this.state.classList}
                        studentList={this.state.studentList}
                        selectStudentList={this.state.selectStudentList}
                        evaluateList={this.state.evaluateList}
                        refresh={this.refresh}
                        origin={this.props.params.origin}
                    />}
                <Uploadimg ref="uploadimg" urlList={this.state.urlList}/>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        if (this.props.params.origin == 'add') {
            Actions.getEvaluateRank();
        }
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        
    }
}

reactMixin.onClass(Addevaluate, Reflux.connect(Store));

module.exports = Addevaluate;
